<template>
  <!--  -->
    <XtxDialog title="添加收货地址"  v-if="dialogVisible" v-model:visible="dialogVisible" @close="isCancle">
      <div class="address-edit">
        <div class="xtx-form">
        <div class="xtx-form-item">
          <div class="label" ><i class="red" >*</i>收货人：</div>
          <div class="field">
            <input class="input" placeholder="请输入收货人" v-model="form.receiver"/>
          </div>
        </div>
        <div class="xtx-form-item">
          <div class="label"><i class="red">*</i>手机号：</div>
          <div class="field">
            <input class="input" placeholder="请输入手机号" v-model="form.contact"/>
          </div>
        </div>
        <div class="xtx-form-item">
          <div class="label"><i class="red">*</i>地区：</div>
          <div class="field">
            <XtxCity placeholder="请选择所在地区" :fullLocation="form.fullLocation" @change="changeCityFn"/>
          </div>
        </div>
        <div class="xtx-form-item">
          <div class="label"><i class="red">*</i>详细地址：</div>
          <div class="field">
            <input class="input" placeholder="请输入详细地址" v-model="form.address"/>
          </div>
        </div>
        <div class="xtx-form-item">
          <div class="label">邮政编码：</div>
          <div class="field">
            <input class="input" placeholder="请输入邮政编码" v-model="form.postalCode"/>
          </div>
        </div>
        <div class="xtx-form-item">
          <div class="label">地址标签：</div>
          <div class="field">
            <input class="input" placeholder="请输入地址标签，逗号分隔" v-model="form.addressTags"/>
          </div>
        </div>
      </div>
      </div>
      <template #footer>
        <XtxButton type="gray" style="margin-right: 20px" @click="isCancle">取消</XtxButton>
        <XtxButton type="primary" @click="isOk">确认</XtxButton>
      </template>
    </XtxDialog>
  </template>
<script>
import { ref, reactive } from 'vue'
import { insertAddressAPI } from '@/api'
import Message from 'erabbit-ui/packages/components/Message'
export default {
  name: 'AddressEdit',
  setup () {
    // 表单数据对象
    const form = reactive({
      receiver: '',
      contact: '',
      address: '', // 收货地址(详细)
      postalCode: '',
      addressTags: '',
      isDefault: 1 // 新添加的地址不是默认地址
    })
    const dialogVisible = ref(false)

    // 打开函数
    const open = (edieForm) => {
      console.log(edieForm)
      if (edieForm) {
        for (const key in edieForm) {
          form[key] = edieForm[key]
        }
      }
      dialogVisible.value = true
    }

    // 取消按钮
    const isCancle = () => {
      form.receiver = ''
      form.contact = ''
      form.address = ''
      form.postalCode = ''
      form.addressTags = ''
      form.isDefault = 1
      dialogVisible.value = false
    }
    // 选择城市
    const changeCityFn = (obj) => {
      /* obj
        {
           cityCode:"110100"
           cityName: "北京市"
           countyCode: "110107"
           countyName: "石景山区"
           fullLocation: "北京 北京市 石景山区"
           provinceCode: "110000"
           provinceName: "北京"
        }
        */
      for (const key in obj) {
        form[key] = obj[key]
      }
    }
    // 点击弹出层确定
    const isOk = async () => {
      // 添加地址接口
      await insertAddressAPI(form)
      dialogVisible.value = false
      console.log(form)
      Message({
        type: 'success',
        text: '添加成功'
      })
    }
    return { dialogVisible, open, isCancle, form, changeCityFn, isOk }
  }
}
</script>
  <style scoped lang="less">
.xtx-dialog {
  :deep(.wrapper) {
    max-height: 100%;
    overflow-y: auto;
    width: 780px;
    .body {
      font-size: 14px;
    }
  }
}
.address-edit {
  .red {
    color: var(--price-color);
    position: relative;
    top: 2px;
    margin-right: 2px;
  }
  .xtx-form {
    padding: 0;
    input {
      outline: none;
      &::placeholder {
        color: #ccc;
      }
    }
  }
  .xtx-city {
    width: 320px;
    :deep(.select) {
      height: 50px;
      line-height: 48px;
      display: flex;
      padding: 0 10px;
      justify-content: space-between;
      .placeholder {
        color: #ccc;
      }
      i {
        color: #ccc;
        font-size: 18px;
      }
      .value {
        font-size: 14px;
      }
    }
    :deep(.option) {
      top: 49px;
    }
  }
}
  </style>
